<template>
  <div class="error-page">
    <div class="error-content">
      <div class="error-image">
        <div class="error-icon">
          <el-icon size="200"><Warning /></el-icon>
        </div>
      </div>
      <div class="error-info">
        <h1 class="error-code">404</h1>
        <h2 class="error-title">页面不存在</h2>
        <p class="error-description">
          抱歉，您访问的页面不存在或已被删除。
        </p>
        <div class="error-actions">
          <el-button type="primary" @click="goHome">
            <el-icon><House /></el-icon>
            返回首页
          </el-button>
          <el-button @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回上页
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { House, ArrowLeft, Warning } from '@element-plus/icons-vue'

export default {
  name: 'NotFound',
  components: {
    House,
    ArrowLeft,
    Warning
  },
  setup() {
    const router = useRouter()

    const goHome = () => {
      router.push('/')
    }

    const goBack = () => {
      router.go(-1)
    }

    return {
      goHome,
      goBack
    }
  }
}
</script>

<style lang="scss" scoped>
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  .error-content {
    display: flex;
    align-items: center;
    max-width: 800px;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

    .error-image {
      flex: 1;
      text-align: center;
      margin-right: 40px;

      .error-icon {
        color: #409eff;
        opacity: 0.8;
      }
    }

    .error-info {
      flex: 1;

      .error-code {
        font-size: 72px;
        font-weight: bold;
        color: #409eff;
        margin: 0 0 16px 0;
        line-height: 1;
      }

      .error-title {
        font-size: 32px;
        color: #303133;
        margin: 0 0 16px 0;
        font-weight: 600;
      }

      .error-description {
        font-size: 16px;
        color: #606266;
        margin: 0 0 32px 0;
        line-height: 1.6;
      }

      .error-actions {
        .el-button {
          margin-right: 16px;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .error-page {
    padding: 20px;

    .error-content {
      flex-direction: column;
      text-align: center;
      padding: 30px 20px;

      .error-image {
        margin-right: 0;
        margin-bottom: 30px;

        .error-icon {
          font-size: 120px;
        }
      }

      .error-info {
        .error-code {
          font-size: 48px;
        }

        .error-title {
          font-size: 24px;
        }

        .error-actions {
          .el-button {
            margin: 0 8px 8px 0;
          }
        }
      }
    }
  }
}
</style>
